<?php 
$region = getSQLData('id,name', 'location', array('parent_id' => 0),999,0,array('name' => 'ASC'));
if(isset($location) && $location != ''){
	$location = $location;
}else{
	$location = '';
}
?>

<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target=".navbar-collapse">
				<span class="sr-only">Navigation</span> <span class="icon-bar"></span>
				<span class="icon-bar"></span> <span class="icon-bar"></span>
			</button>

		</div>
		<div class="navbar-collapse collapse ">

			<a class="navbar-brand"
				href="<?=base_url(). url_title(location($location),'-');?>"
				title="<?= location($location); ?> Yellow Page"> Yellow Page <strong><?= location($location); ?>
			</strong>
			</a>

			<ul class="nav navbar-nav navbar-right">
				<li><a data-toggle="modal" href="#locationModal"><i
						class="fa fa-lg fa-map-marker"></i> Location <b class="caret"></b>
				</a>
				</li>
				<li><a href="<?= base_url();?>member/business/plan">Add Business</a></li>
				<?php if(get_session('mem_id')){?>
				<li><a href="<?=base_url();?>member/dashboard"><i
						class="fa fa-lg fa-user"></i> <?= get_session('mem_name')?> </a>
				</li>
				<?php }?>
				<?php if(!get_session('mem_id')){?>
				<li><a href="<?=base_url();?>member/login"><i
						class="fa fa-lg fa-user"></i> Member </a>
				</li>
				<?php }?>

			</ul>

		</div>
		<!--/.nav-collapse -->
	</div>

	<div class="yp-search">
		<div class="container">

			<div class="searchField">

				<div class="col-lg-2 endCap logo">
					<a href="<?=base_url()?>" title="Yellow Pages <?= location(); ?>">
						<img class="img-responsive"
						src="<?= base_url();?>assets/img/<?= setting('site_logo');?>" alt="#">
					</a>
				</div>

				<div class="col-lg-10 search">

					<div class="1form-group col-xs-2 select-search-type ">
						<ul id="myTab" class="list-unstyled">
							<li class="dropdown "><span class="dropdown-toggle"
								data-toggle="dropdown"><span id="select">Business</span> <b
									class=" dropdown-toggle caret"></b> </span>
								<ul class="dropdown-menu">
									<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@Business</a>
									</li>
									<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@Keyword</a>
									</li>
								<!-- 	<li><a href="#dropdown3" tabindex="-1" data-toggle="tab">@Zip</a>
									</li> -->
								</ul>
							</li>
						</ul>
					</div>

					<div class="col-xs-10">
						<div id="searchTabContent" class="tab-content">

							<div class="tab-pane fade active in" id="dropdown1">
								<div class="search-box">
									<form class="col-xs-12" method="POST" id="search-form"
										action="<?= base_url();?>search/search/" name="search-form">

										

										<div class="input-group input1">
											<input type="text" class="form-control"
												placeholder="Type a Business Name..."
												id="business_search" name="key">
												
												


										</div>


										<div class="input-group  input2">
											<input type="text" class="form-control"
												placeholder="Type a location..." id="city_search"
												name="location"> <input type="hidden" name="city_id"
												id="city_id">

											<div class="input-group-btn">
												<button type="submit" name="btn_business" id="btn_business"
													class="btn btn-danger">
													<span class="glyphicon glyphicon-search"></span>
												</button>
											</div>
										</div>
									</form>
								</div>
							</div>



							<div class="tab-pane fade" id="dropdown2">
								<div class="search-box">
									<form class="col-xs-12" method="POST" id="search-form"
										action="<?= base_url();?>search/category/" name="search-form">


										<div class="input-group input1">
											<input type="text" class="form-control "
												placeholder="Type a business name..." id="autocomplete"
												name="cat">
											<input type="hidden" name="cat_id" id="cat_id">

										</div>

										<div class="input-group  input2">
											<input type="text" class="form-control"
												placeholder="Type a location..." id="loca_search"
												name="loca">
												
											<input type="hidden" name="loca_id" id="loca_id">
											<div class="input-group-btn">
												<button type="submit" class="btn btn-danger" name="btn_keyword"id="btn_keyword" >
													<span class="glyphicon glyphicon-search"></span>
												</button>
											</div>
										</div>
									</form>
								</div>
							</div>

							<div class="tab-pane fade" id="dropdown3">
								<div class="search-box">
									<form class="col-xs-12" method="get" id="search-form"
										name="search-form">

										<div class="input-group input1">
											<input type="text" class="form-control "
												placeholder="2 BHK Flat, Pune Real Estate, Pest Control..."
												id="query" name="key" value="">

										</div>

										<div class="input-group  input2">
											<input type="text" class="form-control" placeholder="734001"
												id="query" name="loc" value="">
											<div class="input-group-btn">
												<button type="submit" class="btn btn-danger">
													<span class="glyphicon glyphicon-search"></span>
												</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>


					</div>










					<script type="text/javascript">
$(".dropdown-menu li a").click(function(){
	  $(this).parents(".select-search-type").find('#select').text($(this).text());
	  $(this).parents(".select-search-type").find('#select').val($(this).text());
	});
</script>















				</div>
			</div>
		</div>
	</div>
</div>



<!--  LOCATION MODAL BOX -->
<script type="text/javascript">

$(document).ready(function(){
    $('#modal_region').change(function(){ //any select change on the dropdown with id country trigger this code
        $("#modal_city > option").remove(); //first of all clear select items
        var state_id = $('#modal_region').val();  // here we are taking country id of the selected one.
      
         $("#modal_city").removeAttr('disabled');
       
         
        var base_url = $('body').data('baseurl');
        
       // var url = base_url+"browse/location/getcity/"+state_id
       // alert(url)
        var img = base_url + "assets/img/ico/ajax-loader-mini.gif";
		$('#alert').html('<img src="' + img + '" />')
        
        $.ajax({
            type: "GET",
            url: base_url+"browse/location/getcity/"+state_id, //here we are calling our user controller and get_cities method with the country_id
            
            success: function($city) //we're calling the response json array 'cities'
            {
            	var opt1 = $('<option />'); // here we're creating a new select option with for each city
                opt1.val(0);
                opt1.text("--Select City--");
                
                $('#city').append(opt1); //here we will append these new select options to a dropdown with the id 'cities'
                
            	
                $.each($city,function(child_id,name) //here we're doing a foeach loop round each city with id as the key and city as the value
                {
                	var opt = $('<option />'); // here we're creating a new select option with for each city
                    opt.val(child_id);
                    opt.text(name);
                    $("#modal_alert").html(opt).fadeIn('slow');
                    $('#modal_city').append(opt); //here we will append these new select options to a dropdown with the id 'cities'
                });
            }

        });

    });
});

//-- ON SET LOCATION --//

$(document).ready(function() {

	$("#modal_set_location").click(function() {

		var base_url = $('body').data('baseurl');

		var curl = $('#curl').val();

		$.ajax({
			type : "POST",
			url : base_url + "browse/location/set_location",
			dataType : "json",
			data : $('#modal_set_location_form').serialize(),
			success : function(data) {
				var cc = data.message;
				if (data != null) { // redirect...
					$("#locationModal").modal('hide');
					window.location.href = cc;
				} else { // report failure...
					$("#locationModal").modal('hide');
					window.location.href = curl;
				}
			},
			error : function() {
				alert("failure");
			}
		});

	});
});

</script>

<div class="modal" id="locationModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">X</button>
				<h4 class="modal-title">
					<i class="fa fa-lg fa-list-alt"></i> SELECT LOCATION
				</h4>

			</div>
			<div class="modal-body">

				<form method="POST" id="modal_set_location_form"
					name="modal_set_location_form">
					<input type="hidden"
						name="<?php echo $this->security->get_csrf_token_name(); ?>"
						value="<?php echo $this->security->get_csrf_hash();?>" /> <input
						type="hidden" name="modal_curl" id="curl"
						value="<?= uri_string(); ?>" />
					<div class="form-group col-lg-6">
						<label for="exampleInputEmail1"><i class="fa fa-lg fa-map-marker"></i>
							Region</label> <select class="form-control" id="modal_region"
							name="modal_region">
							<option value="">--Select Region --</option>
							<?php foreach($region as $region):?>
							<option value="<?= $region['id']; ?>">
								<?= $region['name']; ?>
							</option>
							<?php endforeach;?>
						</select>
					</div>
					<div class="form-group col-lg-6">
						<label for="exampleInputPassword1"><i
							class="fa fa-lg fa-map-marker"></i> City &nbsp;<span
							id="modal_alert" class="pull-right"></span> </label> <select
							class="form-control" id="modal_city" name="modal_city">
							<option value="">--Select City --</option>
						</select>
					</div>

					<div class="modal-footer">

						<a href="#" data-dismiss="modal" class="btn">Close</a> <input
							type="button" id="modal_set_location" class="btn btn-inverse"
							value="Set location">
					</div>

				</form>

			</div>

		</div>
	</div>
</div>
<!-- END OF LOCATION MODAL -->

<script type="text/javascript">

$(document).ready(function() {
	var base_url = $('body').data('baseurl');

	$("#btn_keyword").click(function() {
		if ($('#autocomplete').val() == "") {
			alert("Please Provide a Keyword Name ...");
			$("#autocomplete").focus();
			return false;
		}
		;
	});
	
	
	$('#autocomplete').autocomplete({
		source : base_url + "browse/category/autocomplete",
		minLength : 2,
		delay : 10,
		enable : true,
		autoFocus : true,

		focus : function(event, ui) {

			$("#cat_id").val(ui.item.value);
			return false;
		},
		select : function(event, ui) {
			$("#autocomplete").val(ui.item.label);
			$("#cat_id").val(ui.item.value);
			return false;
		},

	});

});


$(document).ready(function() {
	var base_url = $('body').data('baseurl');

	$("#btn_business").click(function() {
		if ($('#business_search').val() == "") {
			alert("Please Provide a Business Name ...");
			$("#business_search").focus();
			return false;
		}
		;
	});
	
	$('#business_search').autocomplete({
		source : base_url + "browse/search/business_search",
		minLength : 2,
		delay : 10,
		enable : true,
		autoFocus : true,

		focus : function(event, ui) {

			$("#busin_id").val(ui.item.value);
			return false;
		},
		select : function(event, ui) {
			$("#business_search").val(ui.item.label);
			
			$("#busin_id").val(ui.item.value);
			return false;
		},

	});

});


$(document).ready(function() {
	var base_url = $('body').data('baseurl');
	$('#city_search').autocomplete({
		source : base_url + "browse/location/city_search",
		minLength : 2,
		delay : 10,
		enable : true,
		autoFocus : true,

		select : function(event, ui) {
			$("#city_search").val(ui.item.label);
			$("#city_id").val(ui.item.value);
			return false;
		},

	});

});

$(document).ready(function() {
	var base_url = $('body').data('baseurl');
	$('#loca_search').autocomplete({
		source : base_url + "browse/location/city_search",
		minLength : 2,
		delay : 10,
		enable : true,
		autoFocus : true,

		select : function(event, ui) {
			$("#loca_search").val(ui.item.label);
			$("#loca_id").val(ui.item.value);
			return false;
		},

	});

});


</script>

